<template>
  <view class="container">
    <!-- 背景图片 -->
    <image class="background-image" src="/static/img4.png" mode="aspectFill"></image>
    
    <!-- 搜索框 -->
    <view class="search-section">
      <view class="search-box click-feedback" @tap="handleSearchClick">
        <input class="search-input" placeholder="搜索服务、功能..." />
      </view>
    </view>
    
    <!-- 主要功能图标 -->
    <view class="icon-grid">
      <view class="icon-item click-feedback" 
            v-for="(item, index) in mainIcons" 
            :key="index" 
            @tap="handleIconClick(item)">
        <view class="icon">{{ item.emoji }}</view>
        <text class="icon-text">{{ item.name }}</text>
      </view>
    </view>
    
          <!-- 英雄区域 -->
    <view class="hero-section">
      <button class="cta-button click-feedback" @tap="handleHeroClick">立即参与</button>
    </view>
    
    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 次级功能图标 -->
      <view class="secondary-icons">
        <view class="icon-grid secondary">
          <view class="icon-item click-feedback" 
                v-for="(item, index) in secondaryIcons" 
                :key="index" 
                @tap="handleIconClick(item)">
            <view class="icon">{{ item.emoji }}</view>
            <text class="icon-text">{{ item.name }}</text>
          </view>
        </view>
        
        <view class="icon-grid secondary">
          <view class="icon-item click-feedback" 
                v-for="(item, index) in tertiaryIcons" 
                :key="index" 
                @tap="handleIconClick(item)">
            <view class="icon">{{ item.emoji }}</view>
            <text class="icon-text">{{ item.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 轮播图和保险活动并排显示 -->
      <view class="horizontal-section">
        <!-- 轮播图 -->
        <view class="carousel-section">
          <swiper 
            class="carousel-swiper" 
            indicator-dots="true"
            autoplay="true"
            interval="3000"
            duration="500"
            indicator-color="rgba(255,255,255,0.6)"
            indicator-active-color="#fff"
            @change="handleSwiperChange">
                         <swiper-item 
               v-for="(image, index) in carouselImages" 
               :key="index"
               @tap="handleCarouselClick(image, index)">
               <view class="carousel-item">
                 <image 
                   :src="image.src" 
                   class="carousel-image"
                   mode="aspectFill" />
               </view>
             </swiper-item>
          </swiper>
        </view>
        
        <!-- 保险活动 -->
        <view class="insurance-section">
          <text class="section-title">保险活动</text>
          <view class="insurance-grid">
            <view class="insurance-item click-feedback" 
                  v-for="(item, index) in insuranceItems" 
                  :key="index"
                  @tap="handleInsuranceClick(item)">
              {{ item }}
            </view>
          </view>
        </view>
      </view>
      
      <!-- 产品卡片 -->
      <view class="product-grid">
        <view class="product-card click-feedback" 
              v-for="(product, index) in products" 
              :key="index"
              @tap="handleProductClick(product)">
          <view class="product-tag" :class="product.tagClass">{{ product.tag }}</view>
          <view class="product-image">
            <view class="product-placeholder">{{ product.emoji }}</view>
          </view>
          <view class="product-content">
            <text class="product-title">{{ product.title }}</text>
            <view class="product-price">
              <text class="current-price">¥{{ product.currentPrice }}</text>
              <text class="original-price">¥{{ product.originalPrice }}</text>
            </view>
            <button class="buy-button click-feedback" @tap.stop="handleBuyClick(product)">立即预约</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Index',
  setup() {
    // 主要功能图标
    const mainIcons = ref([
      { name: '高速好友', emoji: '👥' },
      { name: '待事务', emoji: '📋' },
      { name: '创建日榜', emoji: '📊' },
      { name: '我的积分', emoji: '💎' }
    ])

    // 次级功能图标
    const secondaryIcons = ref([
      { name: '高速好友', emoji: '👥' },
      { name: '待事务', emoji: '📋' },
      { name: '创建日榜', emoji: '📊' },
      { name: '我的积分', emoji: '💎' }
    ])
    
    // 第三行功能图标
    const tertiaryIcons = ref([
      { name: '高速好友', emoji: '👥' },
      { name: '待事务', emoji: '📋' },
      { name: '创建日榜', emoji: '📊' },
      { name: '我的积分', emoji: '💎' }
    ])

    // 保险项目
    const insuranceItems = ref(['车险', '健康险', '旅游险', '意外险'])

    // 轮播图数据
    const carouselImages = ref([
      { src: '/static/img1.jpg' },
      { src: '/static/img2.jpg' },
      { src: '/static/img3.jpg' }
    ])

    // 当前轮播图索引
    const currentSwiperIndex = ref(0)

    // 产品数据
    const products = ref([
      {
        tag: '新客立减',
        tagClass: 'tag-new',
        emoji: '🔬',
        title: 'X射线光电子能谱（XPS）检测服务',
        currentPrice: '54.00',
        originalPrice: '90.00'
      },
      {
        tag: '热门推荐',
        tagClass: 'tag-hot',
        emoji: '🔍',
        title: '扫描电镜SEM检测分析',
        currentPrice: '68.00',
        originalPrice: '120.00'
      },
      {
        tag: '新客立减',
        tagClass: 'tag-new',
        emoji: '📊',
        title: '红外光谱FTIR成分检测',
        currentPrice: '42.00',
        originalPrice: '75.00'
      },
      {
        tag: '限时特惠',
        tagClass: 'tag-special',
        emoji: '⚛️',
        title: '质谱分析MS精准检测',
        currentPrice: '88.00',
        originalPrice: '150.00'
      }
    ])

    // 事件处理函数
    const handleSearchClick = () => {
      console.log('搜索框被点击')
      uni.showToast({
        title: '搜索功能',
        icon: 'none'
      })
    }

    const handleIconClick = (item) => {
      console.log('点击了图标:', item.name)
      uni.showToast({
        title: `点击了${item.name}`,
        icon: 'none'
      })
    }

    const handleHeroClick = () => {
      console.log('英雄区域被点击')
      uni.showToast({
        title: '立即参与活动',
        icon: 'none'
      })
    }

    const handleSwiperChange = (e) => {
      currentSwiperIndex.value = e.detail.current
      console.log('轮播图切换到第', e.detail.current + 1, '张')
    }

    const handleCarouselClick = (image, index) => {
      console.log('轮播图被点击:', '第' + (index + 1) + '张图片')
      uni.showToast({
        title: `点击了第${index + 1}张图片`,
        icon: 'none'
      })
    }

    const handleInsuranceClick = (item) => {
      console.log('保险项目被点击:', item)
      uni.showToast({
        title: `选择了${item}`,
        icon: 'none'
      })
    }

    const handleProductClick = (product) => {
      console.log('产品被点击:', product.title)
      uni.showToast({
        title: `查看${product.title}`,
        icon: 'none'
      })
    }

    const handleBuyClick = (product) => {
      console.log('购买按钮被点击:', product.title)
      uni.showToast({
        title: `预约${product.title}`,
        icon: 'success'
      })
    }

    return {
      mainIcons,
      secondaryIcons,
      tertiaryIcons,
      insuranceItems,
      carouselImages,
      currentSwiperIndex,
      products,
      handleSearchClick,
      handleIconClick,
      handleHeroClick,
      handleSwiperChange,
      handleCarouselClick,
      handleInsuranceClick,
      handleProductClick,
      handleBuyClick
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* 背景图片 */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 620rpx; /* 调整背景图高度，正好到达活动参与按钮底部 */
  z-index: -1;
}

/* 头部 */
.header {
  background: rgba(255, 255, 255, 0.95);
  /* backdrop-filter: blur(10px); */
  padding: 24rpx 40rpx;
  text-align: center;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

/* 搜索框 */
.search-section {
  padding: 30rpx 40rpx;
  position: relative;
  z-index: 1;
  
  .search-box {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50rpx;
    padding: 24rpx 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    .search-input {
      width: 100%;
      font-size: 32rpx;
      color: #333;
      border: none;
      outline: none;
    }
  }
}

/* 功能图标网格 */
.icon-grid {
  padding: 40rpx;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  position: relative;
  z-index: 1;
  
  &.secondary {
    padding: 0 0 40rpx 0;
  }
  
  .icon-item {
    background: transparent;
    border-radius: 30rpx;
    padding: 20rpx 10rpx;
    text-align: center;
    transition: all 0.3s ease;
    
    .icon {
      width: 80rpx;
      height: 80rpx;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      border-radius: 50%;
      margin: 0 auto 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 36rpx;
    }
    
    .icon-text {
      font-size: 24rpx;
      color: #fff;
      font-weight: 600;
      text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

/* 英雄区域 */
.hero-section {
  margin: 120rpx 40rpx 0 40rpx;
  height: auto;
  background: transparent;
  border-radius: 40rpx;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0 0 0;
  
    .cta-button {
    background-color: #FFB827;
    color: #893A0B;
    border: none;
    height: 80rpx;
    border-radius: 50rpx;
    padding: 5rpx 50rpx;
    font-weight: 600;
    font-size: 32rpx;
    width: 50%;
    transition: all 0.3s ease;
  }
}

/* 内容区域 */
.content-area {
  background: #F2F5F8;
  margin-top: 0;
  padding: 20rpx;
  min-height: 600rpx;
  position: relative;
  z-index: 1;
}

/* 次级图标区域 */
.secondary-icons {
  margin-bottom: 50rpx;
  
  .icon-grid .icon-item .icon-text {
    color: #333;
    text-shadow: none;
  }
}

/* 水平布局容器 */
.horizontal-section {
  display: flex;
  gap: 20rpx;
  margin-bottom: 50rpx;
  align-items: stretch; /* 让子元素高度一致 */
}

/* 轮播图 */
.carousel-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  .carousel-swiper {
    height: 100%; /* 占满父容器高度 */
    border-radius: 30rpx;
    overflow: hidden;
    
    /* 轮播图指示器将使用默认样式 */
    
    .carousel-item {
      width: 100%;
      height: 100%;
      
      .carousel-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

/* 保险活动区域 */
.insurance-section {
  flex: 1;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 30rpx;
    color: #333;
    display: block;
  }
  
  .insurance-grid {
    padding: 10rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    flex: 1; /* 占据剩余空间 */
    
    .insurance-item {
      background: blanchedalmond;
      border-radius: 20rpx;
      padding: 20rpx 16rpx;
      text-align: center;
      transition: all 0.3s ease;
      border: 4rpx solid transparent;
      font-size: 24rpx;
      color: #333;
    }
  }
}

/* 产品卡片 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  padding: 0 10rpx;
  
  .product-card {
    background: white;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    
    .product-tag {
      display: inline-block;
      color: white;
      padding: 6rpx 16rpx;
      border-radius: 8rpx;
      font-size: 20rpx;
      font-weight: 500;
      margin: 16rpx 16rpx 12rpx 16rpx;
      
      &.tag-new {
        background: #1890ff;
      }
      
      &.tag-hot {
        background: #52c41a;
      }
      
      &.tag-special {
        background: #ff4d4f;
      }
    }
    
    .product-image {
      height: 180rpx;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 16rpx 16rpx 16rpx;
      overflow: hidden;
      border-radius: 12rpx;
      
      .product-placeholder {
        width: 120rpx;
        height: 120rpx;
        background: linear-gradient(45deg, #e6f7ff, #bae7ff);
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1890ff;
        font-size: 48rpx;
      }
    }
    
    .product-content {
      padding: 0 16rpx 16rpx 16rpx;
      
      .product-title {
        font-size: 26rpx;
        font-weight: 400;
        margin-bottom: 16rpx;
        color: #333;
        line-height: 1.3;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .product-price {
        margin-bottom: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .current-price {
          color: #ff4d4f;
          font-size: 32rpx;
          font-weight: 600;
        }
        
        .original-price {
          color: #999;
          font-size: 24rpx;
          text-decoration: line-through;
        }
      }
      
      .buy-button {
        background: #1890ff;
        color: white;
        border: none;
        border-radius: 40rpx;
        padding: 12rpx 24rpx;
        font-size: 24rpx;
        width: 100%;
        transition: all 0.3s ease;
        font-weight: 400;
      }
    }
  }
}
</style>
